<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 
    data 与el的两种写法
    1.el：
        （1）. new Vue时配置el属性
        （2）. 先创建Vue实例，随后再通过v.$mount('#root')指定el的值
    2.data：
        （1）. 对象式
        （2）. 函数式 以后学习到组件时data必须使用函数式，否则会报错
    3.一个重要原则
        由Vue管理的函数，一定不要写成箭头函数，一旦写了箭头函数，this就不再是Vue实例了
 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        const v = new Vue({
            // el:"#root",//实例容器绑定：第一种写法
            //data 对象的第一种写法
            // data:{
            //     name: "Aurora"
            // }
            //data 对象的第二种写法
            data: function(){
                console.log(this)//此处的this是vue实例对象
                //可以简写成 ： data(){return {}}
                //但是不能写成 data: ()=>{return {}}   箭头函数没有自己的this，此时this为全局window
                return {
                    name:'Polaris'
                }
            }
        })
        v.$mount('#root');//实例容器绑定：第二种写法
    </script>
    
</body>
</html>